package com.wake.mycomposebook.ui.home.layouts.advlist

import androidx.compose.animation.animateColor
import androidx.compose.animation.core.*
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import androidx.compose.ui.ExperimentalComposeUiApi
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.constraintlayout.compose.ChainStyle
import androidx.constraintlayout.compose.ConstraintLayout
import androidx.constraintlayout.compose.Dimension
import com.wake.mycomposebook.ui.home.layouts.MyAdvList

/**
 *@author created by WA03675
 *@date  2022-04-19 16:33
 *@des
 */

enum class ShimmerAnimationType {
    FADE, TRANSLATE, FADETRANSLATE, VERTICAL
}

@Composable
fun ShimmerList() {
    var shimmerAnimationType by remember {
        mutableStateOf(ShimmerAnimationType.FADE)
    }

    val transition = rememberInfiniteTransition()
    val translateAnim by transition.animateFloat(
        initialValue = 100f,
        targetValue = 600f,
        animationSpec = infiniteRepeatable(
            tween(durationMillis = 1200, easing = LinearEasing),
            RepeatMode.Restart
        )
    )
    val colorAnim by transition.animateColor(
        initialValue = Color.LightGray.copy(0.6f),
        targetValue = Color.LightGray,
        animationSpec = infiniteRepeatable(
            tween(1200, easing = FastOutLinearInEasing),
            RepeatMode.Restart
        )
    )

    val list = if (shimmerAnimationType != ShimmerAnimationType.TRANSLATE) {
        listOf(colorAnim, colorAnim.copy(0.5f))
    } else {
        listOf(Color.LightGray.copy(0.6f), Color.LightGray)
    }
    val dpValue = if (shimmerAnimationType != ShimmerAnimationType.FADE) {
        translateAnim.dp
    } else {
        2000.dp
    }

    @Composable
    fun ButtonColors(type: ShimmerAnimationType) = ButtonDefaults.buttonColors(
        containerColor = if (shimmerAnimationType == type)
            androidx.compose.material3.MaterialTheme.colorScheme.primary else Color.LightGray
    )
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .verticalScroll(rememberScrollState())
            .padding(15.dp, 20.dp)
    ) {
        Row(
            horizontalArrangement = Arrangement.SpaceAround,
            modifier = Modifier
                .fillMaxWidth()
                .padding(8.dp)
        ) {
            Button(
                onClick = { shimmerAnimationType = ShimmerAnimationType.FADE },
                colors = ButtonColors(type = ShimmerAnimationType.FADE),
                modifier = Modifier.weight(1f)
            ) {
                Text(text = "Fade")
            }

            Button(
                onClick = { shimmerAnimationType = ShimmerAnimationType.TRANSLATE },
                colors = ButtonColors(type = ShimmerAnimationType.TRANSLATE),
                modifier = Modifier.weight(1f)
            ) {
                Text(text = "TRANSLATE")
            }
        }
        Row(
            horizontalArrangement = Arrangement.SpaceAround,
            modifier = Modifier
                .fillMaxWidth()
                .padding(8.dp)

        ) {
            Button(
                onClick = { shimmerAnimationType = ShimmerAnimationType.FADETRANSLATE },
                colors = ButtonColors(type = ShimmerAnimationType.FADETRANSLATE),
                modifier = Modifier.weight(1f)
            ) {
                Text(text = "FADETRANSLATE")
            }

            Button(
                onClick = { shimmerAnimationType = ShimmerAnimationType.VERTICAL },
                colors = ButtonColors(type = ShimmerAnimationType.VERTICAL),
                modifier = Modifier.weight(1f)
            ) {
                Text(text = "VERTICAL")
            }
        }

        MyAdvItem(list, dpValue.value, shimmerAnimationType == ShimmerAnimationType.VERTICAL)
        MyAdvBigItem()
        MyAdvItem(list, dpValue.value, shimmerAnimationType == ShimmerAnimationType.VERTICAL)
        MyAdvItem(list, dpValue.value, shimmerAnimationType == ShimmerAnimationType.VERTICAL)
    }

}

/**
 * 如何添加颜色?
 *
 */

@OptIn(ExperimentalComposeUiApi::class)
@Composable
fun MyAdvItem(colors: List<Color>, dpValue: Float, isVertical: Boolean) {
    val brush = if (isVertical) Brush.verticalGradient(colors,0f,dpValue) else
        Brush.horizontalGradient(colors,0f, dpValue)

    ConstraintLayout(
        modifier = Modifier
            .fillMaxWidth()
            .height(200.dp),
    ) {
        val (tv0, tv1, tv2, tv3) = createRefs()
        Spacer(
            Modifier
                .fillMaxHeight()
                .width(160.dp)
                .background(brush)
                .constrainAs(tv0) {
                    absoluteLeft.linkTo(parent.start)
                    top.linkTo(parent.top)
                }
        )

        createVerticalChain(tv1, tv2, tv3, chainStyle = ChainStyle.Spread)

        Spacer(
            Modifier
                .height(30.dp)
                .background(brush)
                .constrainAs(tv1) {
                    linkTo(
                        start = tv0.end,
                        end = parent.end,
                    )
                    width = Dimension.fillToConstraints
                }
        )
        Spacer(
            Modifier
                .height(30.dp)
                .background(brush)
                .constrainAs(tv2) {
                    linkTo(
                        start = tv1.start,
                        end = tv1.end,
                    )
                    width = Dimension.fillToConstraints

                }
        )

        Spacer(
            Modifier
                .height(30.dp)
                .background(brush)
                .constrainAs(tv3) {
                    linkTo(
                        start = tv1.start,
                        end = tv1.end,
                    )
                    width = Dimension.fillToConstraints
                }
        )
    }
}

@Composable
fun MyAdvBigItem() {
    Column {
        Spacer(
            Modifier
                .fillMaxWidth()
                .height(200.dp)
                .border(1.dp, Color.Red)
        )

        Spacer(
            Modifier
                .padding(0.dp, 16.dp)
                .fillMaxWidth()
                .height(10.dp)
                .border(1.dp, Color.Red)
        )

        Spacer(
            Modifier
                .padding(0.dp, 0.dp, 0.dp, 16.dp)
                .fillMaxWidth()
                .height(10.dp)
                .border(1.dp, Color.Red)
        )
    }
}

@Composable
@Preview
fun PreviewMyAdvList() {
    MyAdvList()
}